<template>
  <div class="status_bar">
    <div class="bg_color"></div>
    <div @click="statusChange(item.value)" v-for="(item, index) in props.data" :key="index"
      :class="{'item': true, 'active': item.value == active }">
      <h2>{{ item.total }}</h2>
      <span>{{ item.label }}</span>
    </div>

  </div>
</template>

<script setup>
import { defineProps, computed } from "vue";
import useRoute from "@util/router";

const route = useRoute();

const props = defineProps({
  data: {
    type: Array,
    required: true
  },
  default: {}
})

const active = computed(() => {
  return route.query().status || props.default
})

function statusChange(val) {
  route.replaceQuery('status', val)
}
</script>

<style lang="scss">
.status_bar {
  display: flex;
  align-items: center;
  flex-direction: row;
  color: #555;
  height: 76px;
  position: relative;

  h2 {
    margin: 0;
    color: #333;
  }

  .item {
    text-align: center;
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    background-color: #f6f6f6;
    border-radius: 8px;
    cursor: pointer;
  }

  .bg_color {
    border-radius: 8px;
    z-index: -1;
    position: absolute;
    height: 76px;
    background-color: #f6f6f6;
    width: 100%;
  }

  .active {
    h2 {
      color: #fff;
    }

    color: #ffffff;
    background-color: $primary;
  }
}
</style>